<template>
  <div class="article-page">
    <!-- <van-nav-bar title="面经列表" fixed /> -->

    <div class="top">
      <van-tabs
        v-model="active"
        class="tabs"
        line-width="5vw"
        title-active-color="#222222"
        title-inactive-color="#999999"
        color="#222222"
        @change="changeList()"
      >
        <van-tab title="推荐"> </van-tab>
        <van-tab title="最新"></van-tab>
      </van-tabs>
      <div class="logo">
        <img src="../assets/img/logo.png" alt="" />
      </div>
    </div>

    <div class="article-content">
      <!-- <div class="loading" v-if="isLoad">
        <van-loading type="spinner" size="24px">加载中...</van-loading>
      </div> -->

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="article-item"
          v-for="item in list"
          :key="item.id"
          @click="detail(item.id)"
        >
          <div class="head">
            <img :src="item.avatar" alt="" />
            <div class="con">
              <p class="title">{{ item.stem }}</p>
              <p class="other">{{ item.creator }} | {{ item.createdAt }}</p>
            </div>
          </div>
          <div class="body">
            {{ removeHtmlTags(item.content) }}
          </div>
          <div class="foot">
            点赞 {{ item.likeCount }} | 浏览 {{ item.views }}
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import myAxios from "@/utils/httpUtil";

// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
export default {
  name: "ArticlePage",
  data() {
    return {
      list: [],
      active: 0,
      query: { current: 0, pageSize: 10 },
      isLoad: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    detail(id) {
      this.$router.push({
        // path: "/detail",
        name: "detail",
        params: { id },
      });
    },
    changeList() {
      console.log("获取数据");
      if (this.active === 0) {
        this.query.sorter = "weight_desc";
      } else {
        delete this.query.sorter;
      }
      // const current = this.query.current;
      this.query.current = 0;
      this.list = [];
      this.finished = false;
      //如果滚动条在最顶部则调用onLoad
      const scrollTop = document.documentElement.scrollTop;
      if (scrollTop === 0) {
        this.loading = true;
        this.onLoad();
      }

      // if (current == 1) {
      //   this.onLoad();
      // }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.query.current++;
      myAxios
        .get("/h5/interview/query", {
          params: this.query,
        })
        .then((res) => {
          // this.isLoad = false;
          // this.finished = true;
          console.log("res", res);
          if (!res) {
            this.$toast("请先登录");
            //调用父组件Layout的销毁方法
            this.$parent.$destroy();
            return;
          }
          if (this.list.length === 0) {
            this.list = res.data.data.rows;
          } else {
            this.list.push(...res.data.data.rows);
          }
          // 加载状态结束
          this.loading = false;
          if (res.data.data.total == this.list.length) {
            this.finished = true;
          }
        });
    },
    removeHtmlTags(html) {
      if (!html) return "";
      return html.replace(/<[^>]*>/g, "");
    },
  },
  created() {
    // this.getList();
  },
};
</script>

<style lang="less" scoped>
.article-page {
  background-color: #fff;
  .top {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    display: flex;
    height: 11.73vw;
    width: 100%;
    .tabs {
      width: 30vw;
      // z-index: 100;
    }
    .logo {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      padding-right: 5vw;
      img {
        height: 70%;
      }
    }
  }

  .article-content {
    padding-top: 46px;
    .loading {
      text-align: center;
    }
    .article-item {
      margin-bottom: 10px;
      background: #fff;
      padding: 10px 15px;
      .head {
        display: flex;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
        }
        .con {
          flex: 1;
          overflow: hidden;
          padding-left: 15px;
          p {
            margin: 0;
            line-height: 1.5;
            &.title {
              text-overflow: ellipsis;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
            }
            &.other {
              font-size: 10px;
              color: #999;
            }
          }
        }
      }
      .body {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 3.2em;
        word-break: break-all;
      }
      .foot {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
    }
  }
}
</style>
